Skip to main content

Home/ Web Accessibility/ Group items tagged coding

Rss Feed Group items tagged

Vernon Fowler

Customise radio buttons without compromising accessibility - 0 views

  • go with option 3, a good ole’ opacity: 0 coupled with a position: absolute. Hidden but still focusable, well-supported across browsers. Just what we’re looking for.
  • opacity: 0
  • the label has to come after the input element in the source order
  • ...1 more annotation...
  • sad state of affairs when it comes to browser support for clip-path.
  •  
    "Customised radio buttons and checkboxes are a common design pattern found on the web, and it doesn't take too much to ensure that your beautifully designed toggles are still navigable via keyboard."
Vernon Fowler

Screenreaders · Bootstrap - 0 views

  • Hide an element to all devices except screen readers with .sr-only.
  • Combine .sr-only with .sr-only-focusable to show the element again when it’s focused (e.g. by a keyboard-only user).
Vernon Fowler

WebAIM: Color Contrast Checker - 0 views

  • WAVE can analyze contrast ratios for all page elements at once.
  • Colorzilla is an excellent tool for extracting the color value from any page element.
  • You can append ?fcolor=0000ff&bcolor=ff0000 (where the fcolor value is the foreground color and the bcolor value is the background color) to the URL of this page to analyze colors directly from a link or URL (link example).
Vernon Fowler

WebAIM: To ARIA! The Cause of, and Solution to, All Our Accessibility Problems - 0 views

  • this role is often used extraneously (<button role="button">)
  • aria-label can also override other important information such as link text
  • aria-expanded This can tell screen reader users that activating a button or link will cause content to expand and collapse below (e.g., an accordion), and also whether it is currently collapsed or expanded.
Vernon Fowler

Validation messages - 0 views

  • If there are any validation messages, the focus is set to the first invalid input: this way, a screen reader will immediately announce the associated message, so the user knows that there is at least one invalid input to be fixed.
  • For multiple radio buttons or checkboxes, the message is associated to the surrounding <fieldset>.
  • In addition to this, each invalid input is associated to its message using aria-describedby. This is important, as it makes sure that screen readers also announce the messages when navigating through the inputs using the Tab key.
  •  
    "Data submitted in a form is usually validated in some way. And if there is any unacceptable data, the form is traditionally re-displayed, together with validation messages. In such a case, it is important to immediately inform screen reader users, so they know that they have to look at their data and submit again. "
Vernon Fowler

Places It's Tempting To Use Display: None; But Don't | CSS-Tricks - 0 views

  • I recently heard a heartbreaking story about a blind girl trying to apply for college and the form had missing labels so she had no idea what to put in what fields.
  • @media queries Turning on Voice Over in OS X and using Safari is a screen reader. Now imagine that Safari window was open to a very narrow width and the page had some @media queries for handling smaller viewports. And say that @media query hides some things with display: none in order to better visually accomodate the space. This could be good or bad for accessibility. Are you hiding a bunch of crap that isn't important to the page? Or are you hiding useful things that a person using a screen reader should have access to like they normally would.
Vernon Fowler

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

  • 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

HTML5 Accessibility Chops: When to use an ARIA role | The Paciello Group Blog - 0 views

  • The situation for new HTML5 elements is different and likely to remain so for some time. It will be years before New HTML5 elements get robust accessibility support implemented across browsers and platforms. This is particularly so for non interactive elements such as the new HTML5 structural elements because  accessibility APIs in general do not have defined roles for many non interactive elements. In this case it is recommended to add the appropriate ARIA roles to elements that are meant to convey meaning but are effectively meaningless due to lack of implemented accessibility support. For example, adding role=navigation to a nav element fills the gaps in support for HTML5 semantics as ARIA  is more robustly  supported by most modern browsers and assistive technology:
  • <nav role=”navigation”>
  • Authors/developers can safely assume that any element that has been around since HTML 4.0 is already accessibility supported in browsers that support accessibility. So they do not need a default implicit role added.
Sandra Earl

Digital Web Magazine - Understanding Disabilities when Designing a Website - 0 views

  • In the UK In the US 2m people have a vision impairment3 10m people have a vision impairment4 8.2m people have mild to moderate deafness5, 688,000 people have severe to profound deafness6 28m people have a hearing impairment7 3.4m people have a physical disability8 8m people have a physical disability9 1.5m people have a learning disability10 6.8m people have a learning disability11 6m people have dyslexia12 25m people have dyslexia13
  • Most people who are blind will rely on screen reading software such as
  • JAWS or Windows-Eyes
  • ...41 more annotations...
  • refreshable Braille device which converts the text on the website into Braille.
  • Place form instructions before the form field
  • To improve accessibility and usability for screen reader users, form field requirements must be placed before the form field itself.
  • Provide a ‘skip to main content’ link Screen reader users benefit from a ‘skip to main content’ link as it enables them to jump over lengthy navigation to the main content of the web page, reducing the amount of content they have to listen to.
  • Ensure link text is descriptive Screen reader users using software such as JAWS can listen to the links on a web page through functionality known as a links list. If link text is not descriptive—solely using phrases such as “click here” or “more information”, for example—there is no way for screen reader users to determine where the link will take them.
  • Provide descriptive web page titles The first piece of information a screen reader user will listen to when they open a web page is the <title> assigned to the page. It is important, therefore, to use a title which reflects the content of the web page.
  • Provide descriptive headings It is important to provide descriptive headings
  • Screen reader users often listen to headings out of context from the main content
  • Provide audio descriptions and transcripts of video content Screen reader users depend on audio descriptions to provide additional information about important visual content displayed within a video.
  • Transcripts are written accounts of the video or audio content and can include additional information such as comments and descriptions
  • screen reader users cannot use a mouse
  • People with low vision will tend to use magnification software to make reading a website easier. Depending on the severity of their vision impairment, these users may combine magnification and screen reading software by using software products such as Supernova or ZoomText. For milder vision impairments, users may just increase the default size of text within their browser settings or change the colors to make the content more comfortable to read.
  • Avoid using images of text
  • Ensure text can be resized
  • Place key information in specific locations of the screen
  • ebsite search functionality is often located in the top-right corner of the web page
  • Juicy Studio color contrast analyzer.
  • it is possible to determine whether the colors chosen meet the minimum requirements specified in the WCAG Guidelines.
  • People with a hearing impairment tend not to use assistive software to improve their web browsing experience. Instead, they rely on the website being accessible by providing any audio content in alternative formats, such as captioning or transcripts.
  • By making audio content accessible for users with a hearing impairment, it also makes the content accessible for other users who find themselves in an environment where audio cannot be heard.
  • library with the sound turned down; they may be in a noisy environment where it is difficult to hear the audio; or they may be using a computer without speakers.
  • Provide captions for any video content
  • Provide transcripts of the spoken audio Where content is spoken without video, such as in a podcast, it is important to provide a transcript. It is recommended that the transcript be provided in plain accessible HTML to allow access by the widest possible audience, as opposed to a Microsoft Word or Adobe PDF document.
  • Physical disabilities range in severity from those who are temporarily disabled, for example having a broken arm, to those who are quadriplegic and have no use of any limbs. Depending on the severity of the physical disability, these users may access websites through voice recognition software such as Dragon Naturally Speaking.
  • However, what all users with a physical disability have in common is limited or no ability to use a mouse. This means that content within the website that requires a mouse click or fine motor control cannot be accessed by these users.
  • Ensure all content can be accessed via the keyboard
  • Users with a physical disability will have limited or no ability to use a mouse and as such will navigate websites using the keyboard.
  • Provide a focus state for links
  • Provide visible skip links Skip links are links that become visible when they receive focus, and are helpful for users with a physical disability. Keyboard users must tab through the web page to reach the particular link they are interested in—skip links allow lengthy navigation to be bypassed and reduce the number of key presses required to activate links in the main content.
  • Avoid moving targets Avoid using moving targets such as tickers, as users with a physical disability can find them very difficult to use.
  • Provide large clickable areas
  • provide sufficient whitespace between links
  • People with a cognitive or learning disability may have difficulties with memory, problem solving, perception, and conceptualization. In addition, people with a learning disability may have issues with reading and comprehension such as dyslexia.
  • To enhance the usability of the website for these users it is important that content is written in plain English, page layouts are simple in design, navigation is clear and consistent and there is no moving content to impede comprehension.
  • Provide the same look and feel throughout all pages of the website. Ensure that the navigation and main content are located in the same area of every page. Additionally, consider color coding different sections within the website. Users with cognitive or learning disabilities tend to find it easier to navigate around sections which are color coded.
  • Provide a site map A site map will enable users with a cognitive or learning disability to have a clear idea of the breadth of content contained within the website. The site map also enables users to directly access any page on the website, and helps if the user becomes lost.
  • Use a resizable sans-serif font which is left-aligned To increase readability for users with a cognitive or learning disability, use a sans-serif font which can be resized. Additionally, left-align content—justified text is more difficult to read due to the uneven spacing between words. Italicized and capitalized text should also be kept to a minimum to aid readability.
  • Provide helpful error messages
  • Offer speech output Organizations such as Browse Aloud and Textic enable content from a website to be spoken when highlighting the words on a web page. Offering this functionality is especially helpful for users who find it difficult to read large amounts of text.
  • Provide an Easy Read Version Consider providing an ‘easy read’ version of complex content. This combines plain text with images to aid understanding of the information. For an example of an easy read document see the Department of Health’s Making Lives Better for People with a Learning Disability.
  • Provide different color schemes People with cognitive or learning disabilities may benefit from different color scheme options. It is helpful if an easy read scheme such as a lemon background with dark text, and a hi-viz scheme such as a black background with yellow text, are provided.
Vernon Fowler

Inclusively Hidden | scottohara.me - 0 views

  • sometimes content is for decorative purposes only, and it would be optimal to not announce this content to assistive technology.
  • don’t use aria-hidden on focusable content
  • Purposefully Hidden from Assistive Technology
  • ...1 more annotation...
  • using aria-hidden to hide content specifically from screen readers
  •  
    There are various techniques to visually hide content in our web interfaces, but are you aware of the different effects they have on the accessibility of that content? While it would be nice if there was a single, native, solution for hiding content, there are contextual benefits to the various techniques at our disposal. Since there have been many articles already written about these techniques, over the many years they've been in use, the focus of this article will be to highlight the ones that are most appropriate for modern web development. We won't just look at the code behind each of these techniques, instead we'll focus on why each technique has its place, using practical examples to demonstrate their purposes. But before we talk about how to hide content we should ask ourselves a question… Why are we hiding content?
Vernon Fowler

WebAIM: Keyboard Accessibility - 0 views

  • Long lists of links or other navigable items may pose a burden for keyboard-only users.
  • The following best practices can facilitate efficient keyboard navigation: Provide a "skip to main content" link on the page. Use a proper heading structure. Provide ARIA landmarks or HTML5 structural elements (<main>, <nav>, etc.)
  •  
    "when testing with a keyboard, you are not just trying to interact with the page successfully, you also want to ensure all interactions are predictable. This requires an understanding of common keyboard interactions."
Vernon Fowler

WebAIM: Semantic Structure - 0 views

  • 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

In Search Of The Perfect CAPTCHA | Smashing Coding - 0 views

  • Try the honeypot method or another that is invisible to users. Some could potentially be bypassed, but their presence is often enough to thwart automated efforts.
Vernon Fowler

On Alt Text ∙ An A List Apart Blog Post - 0 views

  • Any web designer or developer with her heart in the right place knows that, to be accessible, every image requires an alt text. Except when it doesn’t.
  • In this case, then, it is better to use the null alt (alt=”“), and that is what we did in the A List Apart redesign.
Sandra Earl

WebAIM: Accessibility of Rich Internet Applications - 0 views

  • WAI-ARIA (Accessible Rich Internet Applications or ARIA) is a W3C protocol for enhancing and supporting accessibility of scripted and dynamic content.
  • ARIA provides accessible interactive controls (such as tree menus, drag and drop, sliders, sort controls, etc.), content roles for identifying page structure (navigation, search, main content, etc.), areas that can be dynamically updated (called "live regions" in ARIA), better support for keyboard accessibility and interactivity, and much more.
  • accessibility issues with rich internet applications can be characterized as: Providing the semantic structure of page areas and functionality (e.g., navigation, main content, search, etc.) Maintaining accessibility of content that is dynamic and may change within the page (e.g., AJAX content updates) Allowing certain non-focusable page elements to receive keyboard focus (e.g., setting focus to an error message within the page) Providing keyboard and screen reader accessibility with complex widgets and navigation elements (e.g., sliders, menu trees, etc.)
  • ...2 more annotations...
  • WAI-ARIA provides the ability for developers to specify roles for document areas (and many other things).
  • ARIA is being implemented into many scripting libraries (such as jQuery, Dojo, YUI, and GWT). While developers can certainly implement ARIA into their advanced widgets and applications, using ARIA-supported libraries greatly simplifies the process of providing this level of accessibility.
Sandra Earl

Better Website Development: Disability Discrimination Act Dda Amp Web Accessibility - 0 views

  • There's been widespread speculation about the new legislation being introduced under the DDA (Disability Discrimination Act), which will ensure that websites are accessible to blind and disabled users. Try to find specific information about it on the Internet and chances are you'll come up empty handed.The RNIB (Royal National Institute for the Blind) and the DRC (Disability Rights Commission), two of the most renowned advocates for the DDA (Disability Discrimination Act) and accessible websites, have no specific information about the laws and what websites specifically need to do in order to meet the legal requirements.
  • 2.2 (p7): "The Act makes it unlawful for a service provider to discriminate against a disabled person by refusing to provide any service which it provides to members of the public."
  • 4.7 (p39): "From 1st October 1999 a service provider has to take reasonable steps to change a practice which makes it unreasonably difficult for disabled people to make use of its services."
  • ...2 more annotations...
  • The law about accessible websites came into force on 1st October 1999 (http://www.drc-gb.org/open4all/law/code.asp) and the Code of Practice for this section of the Act was published on 27th May 2002 (http://www.hmso.gov.uk/si/si2002/20020720.htm). This means that the majority of websites are already in breach of the law.Can you be sued?Well, probably. The RNIB claim that they've considered taking up a number of legal cases against organisations with regard to their websites. When they raised the accessibility issues of the website under the DDA, companies have typically made the necessary changes, rather than facing the prospect of legal action.The DRC has now published their findings from their formal investigation into 1000 websites. (http://www.drc-gb.org/publicationsandreports/2.pdf). If your website was included then you will have to start thinking about making it accessible to all web users in the very near future.
  • What do you need to do to comply?It's widely believed that if, or perhaps more appropriately when, a case makes it to court that the W3C accessibility guidelines will be used to assess a website's accessibility and ultimately decide the outcome of the case. The W3C is the Internet governing body and its web accessibility guidelines can be found at http://www.w3.org/TR/WAI-WEBCONTENT/full-checklist.html.
Vernon Fowler

WebAIM: Usable and Accessible Form Validation and Error Recovery - 0 views

  • Errors on top
  • As one would guess, the "Errors on top" approach causes the error message to appear before the form. When presented, focus should generally be set directly to this error message. This allows screen reader and keyboard users to immediately access the error message without having to find it amongst the rest of the page contents. The message should also be visually apparent. Focus can be set to the message with client-side scripting using JavaScript focus() or similar, or the server-generated page can include an anchor name in the URI (e.g., http://myserver.com/form.php#errormessage) which will set focus directly to a named anchor or element id located at the beginning of the feedback message.
  • also helpful to inform the user as to the number of errors that were detected
  • ...2 more annotations...
  • provide a link within the error message that will set focus to the appropriate form control
  • Regardless of the mechanism used to identify and recover from form errors, aria-invalid="true" should generally be set on each invalid form control. This attribute causes screen readers to identify the control as being "invalid" or in need of attention.
Vernon Fowler

Contrast ratio in devtools - 0 views

  • To enable it (as of August 2017), you need the following steps: Use Chrome CanaryEnable experiments: chrome://flags/#enable-devtools-experiments
  • From devtools, open settings (F1)Open the experiments panelHit shift seven times (no, I'm not kidding)Check the "Color contrast ratio line in color picker"
Vernon Fowler

WebAIM: Links and Hypertext - Link Text and Appearance - 0 views

  • links are more useful when they make sense out of context
  • In most cases, it is better to use human-readable text instead of the URL.
  • The alternative text should convey the content of the image and the function of the link. In most cases, the content of the image and function of the link are the same, so this text can be very succinct (e.g, alt="Products").
  • ...6 more annotations...
  • When images are used as links, the alternative text performs the function of link text.
  • on both mouse hover and keyboard focus
  • they are also accustomed to seeing tabs and main navigational features (oftentimes created as graphics rather than text) without underlining. In these cases, the linked items should be designed so it is apparent that the user can click on them to perform an action.
  • Authors should avoid non-informative link phrases such as: click here here more read more link to [some link destination] info
  • adjacent links should have adequate whitespace (such as link CSS margins) between them to minimize users inadvertently clicking the wrong link
  • an alphabetical index may use each individual letter of the alphabet as a link
‹ Previous 21 - 40 of 46 Next ›
Showing 20 items per page