Reaching out to see if any ADA compliance experts might know how I might resolve an ADA compliance issue pertaining to our video transactions. We essentially provide links to .txt files for all of our videos which contain the video transcription. But when running an ADA scan we receive 2 errors pertaining to our transcriptions.
"Language missing or invalid "
"Missing or uninformative page title"
I'm not sure how I would tell a screen reader or ADA scanner the language or a page title given that these are just plain txt files. Any assistance would be greatly appreciated. Thanks.
This might be more about how your browser is set up to handle .txt files. Is your default action to download the file or to view it in the browser?
If the file is downloaded, then it's up to the end user to display the .txt file in whatever program they have set up to view them.
If you're letting the browser display the page, then that page is generated by the browser and I'm not sure if you can customize the page that's generated. I tried Firefox, Chrome, and Edge and they all generated a similar template to view a text file. (Edge uses the chromium engine so it's not surprising that Edge and Chrome have the same template). There's just a minor difference in the <head> between Firefox and Chrome.
This is essentially what's generated:
<html>
<head>
<!-- if using firefox -->
<link rel="stylesheet" href="resource://content-accessible/plaintext.css">
<!-- if using chrome/edge -->
<meta name="color-scheme" content="light dark">
</head>
<body>
<pre>
(contents of text file)
</pre>
</body>
</html>
If you run an accessibility scanner on this generated page, you will indeed get the two errors you mentioned.
3.1.1 Language of Page
2.4.2 Page Titled
For the language, that's specified on the <html> element with the lang attribute. If you bring up the code inspector on this stackoverflow page, you'll see lang="en":
<html class="html__responsive " lang="en">
For the page title, that's specified in the <head> with a child element of <title>. You can also see that in the stackoverflow page:
<head>
<title>wcag - ADA Compliance Language Missing or Invalid for video transcription txt files - Stack Overflow</title>
...
</head>
If no page title is specified, the browser usually shows the URL or just the filename as the title.
So, can you do anything about the template? I'm not sure. That would be an interesting project.
An alternative is to have your own webpage display the text file, which you would obviously have complete control over and could specify the language and the page title. But I would make this a lower priority issue over other accessibility issues that your website might have.
Related
I have created an email template and when running tests a strange icon shows up in one of the paragraphs when viewed in Outlook 2013.
The strange icon is between the words 'paying' and 'off'
Does anyone have any ideas on how to hide this icon
EDIT:
HTML
<tr>
<td style="padding:0 0 0 15px;">
<div style="font-family: Calibri,Arial,sans-serif;font-size:13px;color:#FFFFFF;display:inline-block;">Great if you don’t pay off your card every month, or if you are paying off another card with a higher interest rate – saving you money.</div>
</td>
</tr>
Thanks
Possibly something you've already done - but have you tried deleting "paying off" and reytping it manually?
I can't replicate the problem copying the supplied code, so whatever that strange character is must have been stripped out by the stackoverflow editor.
I've encountered similar issues when copy and pasting text from pdfs, it looks perfect in the editor but Outlook attempts (and fails) to display invisible elements that the pdf includes for some reason.
Do you set the character set for your HTML page? Perhaps it's using the wrong encoding.
See this w3schools page
The HTML charset Attribute
To display an HTML page correctly, a web browser must know the character set used in the page.
This is specified in the <meta> tag:
For HTML4:
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1">
For HTML5:
<meta charset="UTF-8">
I am trying to get an image to display on a basic webpage I am writing for a class. It just shows a box with my alternate text. Here is my code:
<html>
<head>
<title>Practice Features</title>
</head>
<body>
<img src=“images/FLCLogo.JPG” alt=“Folsom”>
</body>
</html>
Both the textedit doc and the images folder are in the same folder. In fact, they are the only files in that particular folder.
I'm doing the coding on a Mac, if that makes a difference at all. I've viewed it on both Chrome and Safari. Same issue.
You need to copy the file location..
Go to your image/properties/location+
Copy the location and paste it inside your quotes
I searched through many sites, but I failed to get an answer.
Question :
I want to change icon as per given in below image in my browser.
Currently chrome and Mozilla does not support this feature if you want check you can check it in either ie or safari, it will show where you want.
you should add this tag to head
<link rel="shortcut icon" href="<YOUR ICON PATH>">
this is a tool to help you to create icon using converter
http://www.favicongenerator.com/
Those are called "favicons", and you can set one for your website using a special tag in the HEAD of your HTML. You can find many tutorials on this by Googling (now that you know what they're called).
Wikipedia suggests a tag something like this:
<link rel="shortcut icon" href="http://example.com/myicon.ico" />
As an alternative, your website can provide an image named favicon.ico in the root folder.
That icon names "favicon". To create Something like that go to THIS LINK, Upload an image and get the favicon.ico file, then put it next to your template page on your host.
To get more information go HERE.
I'm using in my website some of the Telerik controls. (framework 2) Now i need to change the meta line to:
<meta http-equiv="X-UA-Compatible" content="IE=9">
instead of:
<meta http-equiv="X-UA-Compatible" content="IE=7">
For css compabilty(for border radius and other things), when i change this line, the telerik controls in some pages are not looking good.
Does anyone have any idea?
Because the stylesheet streamed out from Telerik.Web.Resource.axd handler does not set the mime type properly and IE9 ignores stylesheets without proper mimetype set.
I am not aware of any solution for it except adding the IE7 compatibility meta tag.
Solution:
Create a new code file and add the embedded stylesheets with the assembly code as below.
[assembly: WebResource("Assets.Skins.Calendar.Custom.css", "text/css")]
I'm working on a page that, when I load into IE8 and view the developers tools it tells me that page default is quirks mode.
I've got a strict DTD:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
I even went ahead and put in the explicit standards switch, though I didn't think I'd need to:
<meta http-equiv="X-UA-Compatible" content="IE=8" />
I can't understand why page default isn't IE8 standards?
Only thing I can think of is that to get to this page, I first have to log in to an application and the first pages I must traverse are old quirks mode pages. Does IE decide on which mode to use at a server level, or is it supposed to decide page by page?
Thanks!
Does IE decide on which mode to use at a server level
Not generally, no. There is the ugliness of the compatibility view list, which is site-specific, but that only kicks you back to IE7-style-Standards Mode, not IE5.5-style-Quirks-Mode.
Your code otherwise looks OK, as long as that DOCTYPE is the very first thing on the page. IE will be forced to document.compatMode= 'BackCompat' if there is a comment, PI, XML declaration (prior to IE8) or any non-whitespace textual content before the doctype. If a control character has snuck in that you can't see in your text editor, that could do it.
Example problem page?