Skip to main content

Home/ Web Accessibility/ Group items tagged markup

Rss Feed Group items tagged

Filter: All | Bookmarks | Topics Simple Middle
Vernon Fowler

WebAIM: Appropriate use of alternative text - 0 views

webaim.org/...alttext

accessibility standards reading usability alternative text

shared by Vernon Fowler on 13 Aug 12 - No Cached
  • It is read by screen readers in place of images allowing the content and function of the image to be accessible to those with visual or certain cognitive disabilities. It is displayed in place of the image in user agents (browsers) that don't support the display of images or when the user has chosen not to view images. It provides a semantic meaning and description to images which can be read by search engines or be used to later determine the content of the image from page context alone.
  • The first step when determining appropriate alternative text for an image is to decide if the image presents content and if the image has a function. In most cases, an image will only have a function if it is contained within a link.
  • NOT use the phrases "image of ..." or "graphic of ..." to describe the image.
  • ...14 more annotations...
  • NOT be redundant or provide the exact same information as text within the context of the image.
  • (no alt attribute) is never the right choice
  • When possible, avoid using "link to" or "click this image" or similar wording in the alt attribute. Links are identified as links by screen readers and should be visually apparent to sighted users.
  • Decorative images do not present important content, are used for layout or non-informative purposes, and do not appear within a link. In almost all cases, spacer and decorative images should have null alt text (alt="").
  • Option C (alt="") would be most appropriate in this case because the image does not convey relevant or important content.
  • Form image buttons must have an alt attribute that describes the function of the button. Image buttons are often used to provide a more visually appealing or a smaller version of the standard form buttons. The alternative text should describe what the button will do when selected, such as "Search", "Submit", "Register", "Place your order", etc. For instance, <input type="image" alt="Submit Search"> might be appropriate for an image button on a site search form.
  • text must be provided to the user which presents the CONTENT and FUNCTION of the images within your web content
  • In many cases, images may be given an empty or null alt attribute (e.g., alt="").
  • Option B is the best choice - it clearly provides the content that is being presented by the image - that the link is to a PDF file.
  • Because this is fairly standard practice, providing alternative text for the image, such as your company name (alt="Acme Company), will usually suffice.
  • It is important to note here that if the icon itself were the link to the document, the alternative text should provide a full alternative of the content and function of the link/image combination. Something like, "Download the employment application in PDF format".
  • Alternative text should: presents the CONTENT and FUNCTION of the image. be succinct.
  • Alternative text should not: be redundant (be the same as adjacent or body text). use the phrases "image of…" or "graphic of…".
  • Alt text of a functional image (e.g., an image within a link) should describe the function as well as the content.
Sandra Earl

Forget WYSIWYG editors - use WYSIWYM instead | 456 Berea Street - 0 views

www.456bereastreet.com/...yg_editors_use_wysiwym_instead

accessibility WYSIWYG

shared by Sandra Earl on 12 Oct 10 - Cached
  • A huge problem with almost every CMS in existence is the extremely poor quality of the code produced by their WYSIWYG editors.
  • Since visual gadgetry like WYSIWYG editors sells, every CMS has to have one.
  • That, in turn, makes it necessary for Web professionals who want to reduce the risk of clients unknowingly ruining the website’s semantics and accessibility to disable features and implement more or less advanced code cleaning procedures. It is a mess.
  • ...4 more annotations...
  • Because of the problems caused by WYSIWYG editors I have toyed with the idea of providing a much simpler interface for content editors. Markdown, BBCode, and Textile are a few possible solutions that ensure valid markup and increase the likelihood of it being semantic. The problem would be making clients accept working that way, directly editing pseudo markup. Most clients wouldn’t, so that option is ruled out.
  • But there is another kind of editor that is better suited than WYSIWYG for content-driven, client-edited sites - the WYSIWYM (What You See Is What You Mean) editor. In Visually Editing Semantics - What You See Is What You Mean, Peter Krantz mentions one such editor: WYMeditor.
  • From the WYMeditor site: Our goal is to create a XHTML strict web-based editor which will be usable on many platforms, whith the help of the Open Source Community.
  • There are a few limitations, of course. This is an early version, after all. Besides the issues Peter notes in his post about WYMeditor, here are a few more things I noticed: Table accessibility. There is no way to add elements and attributes (th, caption, scope, etc) needed for accessibility to data tables. Table resizing. It is possible to size tables by dragging handles. Doing so is reflected in the markup. That needs to be filtered out at some stage before saving the page to the database. Incorrect nesting of lists. When you create nested lists, the current list element is closed before the next level ul or ol is inserted.
Vernon Fowler

WebAIM: Creating Accessible Forms - Screen Reader Form Accessibility - 0 views

webaim.org/...screen_reader

webdesign forms screen reader form reading usability accessibility

shared by Vernon Fowler on 07 Oct 12 - No Cached
  • This can be solved by associating form labels to form items on the page. The label should almost always be located adjacent to the form item itself. When a screen reader accesses a form item that has a <label> element associated with it, it will read the text within the <label> element and indicate the type of form item it is (e.g., "First Name. Text box" or "Age. Check box"). Labels are needed for all form elements, except for buttons; the screen reader reads the text that is on the button (e.g., "Submit button").
  • Let's hear what the form sounds like to a screen reader:
  • Let's hear what the form sounds like now, with the improvements that we made:
Vernon Fowler

Complex Data Table Markup Toolbar - 0 views

www.visionaustralia.org/digital-access-tabletoolbar

complex data table markup toolbar

shared by Vernon Fowler on 15 Jan 14 - No Cached
  • Please note that simple data tables are more accessible than complex data tables and that badly structured or marked up complex tables are not accessible.
  • Simple tables rather than complex tables should be implemented whenever possible, and when complex tables are used, please ensure that structure and mark-up is sound.
Vernon Fowler

The Accessibility of WAI-ARIA · An A List Apart Article - 0 views

alistapart.com/...the-accessibility-of-wai-aria

accessibility forms html aria

shared by Vernon Fowler on 10 Feb 14 - No Cached
  • Pages semantically enriched through WAI-ARIA do not currently validate, but this drawback is acceptable: Common browsers do not mind the additional markup.
  • Some sites currently circumvent the validation problem by adding WAI-ARIA attributes to the source code via a script that is executed when the page loads.
  • in HTML5, WAI-ARIA validates
  • ...1 more annotation...
  • as long as older screen reader/browser combinations incapable of interpreting WAI-ARIA still constitute a significant part of the installed base, web designers who care for accessibility should use WAI-ARIA markup only to enrich their sites. They should not rely on it.
Vernon Fowler

WebAIM: Links and Hypertext - Hypertext Links - 0 views

webaim.org/...hypertext_links

links hypertext markup html accessibility usability

shared by Vernon Fowler on 25 Feb 14 - No Cached
  • Users should generally be alerted to links that lead to non-HTML resources, such as PDF files, Word files, PowerPoint files, and so on.
  • nearly everyone agrees that users ought to be alerted when the link does not open in the current window or frame.
  • As with file types above, these icons (with appropriate alternative text) must appear within the link rather than just after it.
Vernon Fowler

Image ALT Tag Tips for HTML | AccessAbility - 0 views

accessibility.psu.edu/imageshtml

alt tag markup accessibility images

shared by Vernon Fowler on 18 Feb 14 - No Cached
  • Alt text with acronyms should be written with spaces in between letters. For instance, <alt="I T S at P S U" > (read by a screen reader as "ITS at PSU")
  • While there is no official length restriction on the length of alt text, many experts recommend 125 characters or fewer because of restrictions within the JAWS screen reader.
  • LONGDESC has incomplete support among both visual browsers and screen readers, and is deprecated in HTML5.
Vernon Fowler

WebAIM: Semantic Structure - 0 views

webaim.org/...semanticstructure

semantic structure headings lists webdesign content usability accessibility markup

shared by Vernon Fowler on 18 Feb 14 - No Cached
  • Their sole purpose is to designate a hierarchy of headline importance, so that both human readers and automated search engines can look at a document and easily determine its information structure.
Vernon Fowler

Creating an Accessible Infographic | Access Matters Blog - 0 views

www.interactiveaccessibility.com/...reating-accessible-infographic

infographic accessibility html markup css progressive enhancement

shared by Vernon Fowler on 25 Feb 14 - No Cached
  • Screen readers are very literal and, as such, tend to read out numbers in a list with no particle words or punctuation.
  • Using a CSS technique to position text off the screen, it’s simple to add some particle words (such as “from” or “to”) for screen reader users. In the case of a range of numbers, the dashes can be presented using graphics and not part of the text content of the page. For example, in the second data point shown in the image below, instead of a screen reader announcing “twenty-six percent fifty-five sixty-four” it would be “twenty six percent fifty-five to sixty-four.”
  • Another example is implied headings. Sighted users can understand quickly from images that a data set title should be “gender” but if the heading doesn’t appear in the design, it should be added and visually hidden using CSS.
Vernon Fowler

WebAIM: Alternative Text - 0 views

webaim.org/alttext

accessibility resources alt text images logos figure markup html

shared by Vernon Fowler on 27 Nov 13 - No Cached
  • Alternative text should not: be redundant (be the same as adjacent or body text). use the phrases "image of…" or "graphic of…".
  • Identifying the logo as actually being a logo (alt="Acme Company Logo") is not typically necessary.
  • If the fact that an image is a photograph or illustration, etc. is important content, it may be useful to include this in alternative text.
  • ...4 more annotations...
  • Decorative images do not present important content, are used for layout or non-informative purposes, and do not appear within a link. In almost all cases, spacer and decorative images should have null alt text (alt="").
  • In current practice on the web, many such images are given descriptive alternative text even though the images don't seem to provide useful content. Option C (alt="") would probably be most appropriate in this case because the image does not convey relevant or important content.
  • Alternative text should: presents the CONTENT and FUNCTION of the image. be succinct.
  • Decorative images still need an alt attribute, but it should be null (alt="").
Vernon Fowler

Bruce Lawson's personal site  : Should you use HTML5 header and footer? - 0 views

www.brucelawson.co.uk/...ou-use-html5-header-and-footer

html5 accessibility markup semantic DIG252

shared by Vernon Fowler on 22 Jun 14 - No Cached
  • Use <header>, <footer> as often as your content requires – only the main header and footer carry implicit banner and contentinfo roles. At a minimum, use them once (assuming you have a page header and footer, that is). Always use <nav> for the primary navigation. Use <main>, but only once per page.
Sandra Earl

97% of websites still inaccessible | 456 Berea Street - 0 views

www.456bereastreet.com/...of_websites_still_inaccessible

accessibility laws statistics general standards testing

shared by Sandra Earl on 12 Oct 10 - Cached
  • United Nations Global Audit of Web Accessibility, conducted by accessibility agency Nomensa on behalf of the United Nations, shows that 97 percent of websites fail to meet the most basic accessibility requirements.
  • A story on the BBC News website, ‘Most websites’ failing disabled, notes that 93 percent did not provide alternative text for all images, 73 percent relied on JavaScript for important functionality, and 98 percent of the sites did not use valid markup.
Sandra Earl

The Dutch accessibility law is awesome | 456 Berea Street - 0 views

www.456bereastreet.com/...h_accessibility_law_is_awesome

accessibility laws standards

shared by Sandra Earl on 12 Oct 10 - Cached
  • New Dutch accessibility law.
  • A few highlights of what is required: separate structure from presentation do not use deprecated markup when creating a new website, use a Strict doctype use progressive enhancement create semantic class and id values use the W3C DOM when scripting script-only links must be generated by JavaScript do not use the alt attribute to create tooltips
Vernon Fowler

How do you figure? | scottohara.me - 0 views

www.scottohara.me/...how-do-you-figure.html

HTML5 markup accessibility screenreaders

shared by Vernon Fowler on 30 Jan 19 - No Cached
  • Vernon Fowler on 30 Jan 19
     
    A figure can be used with or without a figcaption. However, without a caption, or an alternate means of providing an accessible name (e.g. aria-label) a figure may not provide much value in conveying its semantics alone. In some cases, it may not convey any semantics at all if its given no accessible name.
Vernon Fowler

WebAIM: Semantic Structure - 0 views

webaim.org/...semanticstructure

semantic structure headings html markup lists accessibility

shared by Vernon Fowler on 05 Feb 14 - No Cached
  • Technically, lower degree headings should be contained within headings of the next highest degree (i.e., one should not skip heading levels, such as from an <h2> to an <h4>, going down the document).
  • one should not skip heading levels
Vernon Fowler

Accessible Breadcrumb Navigation - 0 views

scottaohara.github.io/a11y_breadcrumbs

navigation accessible accessibility markup

shared by Vernon Fowler on 17 Jul 19 - No Cached
  • Being that a breadcrumb is contained within a nav element, it will be surfaced as a landmark to screen readers. Providing it an accessible name of "breadcrumb" (or whatever term may be more meaningful to your site) will help differentiate it from any other navigation landmarks in the current document, such as the primary navigation
  • using aria-label to provide an accessible name, and aria-current to indicate the currently active link
  • screen reader support for aria-current is rather good
  • ...2 more annotations...
  • Some other breadcrumb patterns remove the <a> element, or at least the href from the link. These examples retain the a href for current link, as without it, people using a screen reader and navigating by links, or via focusable content with the tab key would not come across the currently active link.
  • Breadcrumbs are useful on large websites where pages have clearly defined hierarchy.
1 - 20 of 21 Next ›
Showing 20▼ items per page