Learn by Examples - Explanations
Home Page
The accessibility Issues in the Base template are also covered here.
Skip Navigation
-
Provide an option to 'Skip Navigation' so that a screen reader user can move to the main content of a Web page without having to hear navigational information everytime.
-
On the accessible page, a link with "Skip Navigation" as ALT text is linked to a "Main Content" anchor & placed above the Navigation Bar on the right.
ALT text for Images conveying important information
-
Images that convey information should contain a short but descriptive ALT text.
-
On the accessible page, "School of Aquatic Arts" would be an appropriate ALT text for the image carrying that name.
ALT text for a decorative image
-
Images that simply serve as decorative elements should atleast contain empty ALT text (alt= "")
-
On the accessible page an ALT text description might not be necessary for the decorative water drop image (and for the image at the bottom of the screen) but atleast an empty string("") should be inserted.
ALT text for image maps
-
ALT Text should be provided both for the Main Image & for the Hot spots of Image Maps.
-
On the accessible page the Navigation bar has two image maps in which each link is a Hot Spot. ALT text can describe the links .
Heading markup
-
Use HTML Heading markup tags to provide logical structure to the document.
-
On the accessible page the Headings & Sub-Headings should be tagged with appropriate HTML headings instead of manually formatting them.
Appropriate link labels.
-
Link labels should make sense even when read out of context. "Click here " is a common example for how not to label a link.
-
On the accessible page, "Location map" is a better link phrase/label than "Click here".
Using Colors to convey information
-
Usage of colors should not substitute Markup when defining logical structure to documents.
-
On the accessible page, the Sub-Headings should also be tagged with appropriate HTML headings instead of merely distinguishing them with a different color.
-
For images requiring something more than a short description, the 'longdesc' attribute or a 'D-link' should be used to convey the details.
-
On the accessible page, the location map turns out to be a blank spot if no description is given. The locational information conveyed by the map should be verbalised using 'longdesc' or 'D-link'. We suggest D-links over 'longdesc'
-
Transcript should be provided along side audio content to make them accessible to everyone
-
On the accessible page, transcript is provided for the Dean's speech..
-
Avoid using color to convey information.
-
On the accessible page, the required fields are marked by the ' * ' symbol, instead of using color to represent them.
Use Label Tag to associate Form Fields & Labels
-
Form fields should be associated with apppriate labels using the 'Label' tag & the FOR attribute.
-
On the accessible page, Label tags with FOR attributes are used for both the Text fields and the Radio buttons.
Flashing Text
-
Avoid creating pages with Flashing/Flickering elements.
-
On the accessible page, the flashing text, "Free Underwater Hockey lessons avoided
-
Listing names in alphabetical order of last names is encouraged(instead of using first names). This makes it easier to search.
-
On the accessible page, the faculty names are listed in alphabetical order of their last names.
Professor Jeanna Covarina's Home Page
Providng links to plug-ins & add-on programs.
- When webpages contain content that require add-on programs or "plug-ins" for viewing appropriate links to acquire such programs should be provided.
- On the accessible page, the presence of a PDF file requires a link to the webpage from where Adobe Reader can be downloaded.
Accessible PDFs
- Text based PDF files should be used instead Scanned Image type PDF files
- On the accessible page, the PDF file is a Word to PDF converted document, unlike the scanned PDF used in the accessible page.
Courses Page
Using List tags
-
Usage of markups “LI” & “UL” for lists is encouraged.
-
On the accessible page, the list of courses is given in a bulleted format using "UL" & "LI" tags.
Specifying empty ALT text
- Empty ALT text is specified using "" & not " ". In a Dreamweaver like application the'empty' sting should be used.
- Substituting the BulIet mages with ALT text in the Inaccessible page will reveal these flaws.
Appropriate link labels.
-
Link labels should make sense even when read out of context. "Goto Course Page" on the Inaccessible page appears thrice & creates ambiguity.
-
On the accessible page, this is avoided & the course titles are directly linked to the course pages.
-
Equivalent alternatives for any multimedia presentation should be synchronized with the presentation.
-
On the accessible page, the Demo video is captioned so as to make it accessible.
Accessible Powerpoint slides
-
PowerPoint Presentations should be made accessible
-
On the accessible page, the Lecture slides are made accessible by providing text alternatives for its content.
-
Row and column headers shall be identified for data tables.
-
On the accessible page, the 'Aquatic lab Hours' table's headers are identified with HTML Header tags.
-
When a timed response is required in a web page the user should be appropriately alerted.
-
On the accessible page, sufficient warning is given before the quiz time expires.
-
The "SCOPE" attribute should be used to make for identifying row & column headers in tables.
-
On the accessible page, every intersection of a row & a column can be identified by assistive technologies as their 'Scope' has been specified.