Skip to main content

Home/ Web Accessibility/ Group items tagged design

Rss Feed Group items tagged

Filter: All | Bookmarks | Topics Simple Middle
Vernon Fowler

The Same, But Different: Breaking Down Accessibility, Universality, and Inclusion in De... - 0 views

theblog.adobe.com/-universality-inclusion-design

a11y inclusivedesign twitter accessibility universal design

shared by Vernon Fowler on 24 May 18 - No Cached
  • One way to put a name to this activity is to say that we are going up the mountain — in other words, moving upward is our goal. Another is to refer to reaching the summit — the destination to which we aspire. The former says, in effect, “We are gradually making our way up the hill.” The latter says, “We’re not done until we get to the top.”
  • Inclusive design is the practice of going up the mountain — we can always look for ways to include more people and situations to our designs, even if the result only gets us a few steps up the trail at a time.
  • I would go so far as to say that it’s the scope of that task — the seemingly infinite nature of including everyone — that is too big of a challenge. We aren’t all born to be mountain climbers. But together we can get a little farther up the hill, if we try.
  • Vernon Fowler on 24 May 18
     
    My post on the @adobe blog is up. It's about how I distinguish inclusive design from accessibility, and why you still need to go back and learn about universal design. https://t.co/OsjUp57F29 #a11y #inclusivedesign Great article on the nuances between A11y, Inclusive Design and Universal Design. Thanks @mattmay The Same, But Different: Breaking Down Accessibility, Universality, and Inclusion in Design https://t.co/QJIXT7y96T via @adobe
Vernon Fowler

Inclusive Design: Accessible user experiences on the web « UX Australia 2010 - 0 views

www.uxaustralia.com.au/...inclusive-design

inclusive accessibility accessible user experience webdesign WCAG Design userResearch research workshop UX web

shared by Vernon Fowler on 07 Apr 17 - No Cached
  • Understanding how to incorporate accessible design practices within a project
  • Integrating accessible, inclusive design practices throughout traditional UX research and design practices
Sandra Earl

Designing and Developing mobile web sites in the real world, part 2 - Opera Developer C... - 0 views

dev.opera.com/...d-developing-mobile-web-site-1

accessibility mobile opera best practices reading

shared by Sandra Earl on 12 Oct 10 - Cached
  • In tandem with the launch of their 3G mobile website, Siminn also launched a slightly lighter version of the same site - a 2G-optimized mobile presence to serve less powerful phones. Both sites are anchored to the same reservoir of information, but the 3G site makes less-restricted use of CSS, images, and other coding ornamentations.
  • The only distinction Siminn makes concerning the dimensionality of the user-experience is whether the device is 2G or 3G enabled. As stated before, 2G devices are sent to a slightly lighter version of the 3G site
  • This is exactly what Siminn are doing. By detecting the type of phone, they are presenting the customer with the most appropriate version of the page – either the 3G enhanced or the more basic design.
  • ...19 more annotations...
  • e chose not to try and replicate the entire Icelandair website, but rather to cleave from it four or five of its most crucial elements.
  • This page contains the only form on the mobile site. In general, forms should be avoided because form input via a mobile device can be a tricky endeavor. However, there are certain coding practices that can simplify form input. For example, if your form field should only accept numeric input, then you should make use of the -wap-input-format property of WAP CSS. The Apple iPhone will automatically set the input to numeric if the name of the input element is set to certain values - phone or zip for example.
  • Mobile users only need to be shown news items that have some inherent urgency.
  • Much like your desktop browser recognizes a mailto: link as an email address, mobile devices recognize tel: links and phone numbers.
  • Do not assume that just because the UA string is not in your enumerated list of “Accepted strings”, it is not possible to view the site.
  • This is where you build in progressive enhancements to the website experience.
  • WURFL is an open source list of known phones and their capabilities. This can be put into a database and when a mobile device visits the your site you can sniff the UA, look-up the capabilities of that device (including screen-dimensions, default browser, etc) and serve them the best possible experience.
  • The RDF vocabulary is a standard across many mobile devices. Vendors that use this approach allow mobile sites to keep up-to-date with any new devices, without having to keep their own database of device types.
  • ou can find more details about standards support in Opera Mini/Mobile 4 here: Designing with Opera Mini 4 in mind JavaScript support in Opera Mini 4
  • There are a few basic coding items to avoid in the mobile web space. Chief among these, at least for now (now being 10/2007), is client-side scripting.
  • While it's tempting to try and port that elegant bit of AJAX from your conventional web to your mobile web, you will only create headaches for yourself.
  • ome browsers do support various levels of JavaScript, but as a developer you should not expect it to work across all devices.
  • retty heavy processor hog, so continuous scripting can drain a battery fast
  • mobile browser support for stylesheets varies greatly.
  • keep things simple.
  • most mobile devices default to their own font sizes and families regardless of styling. Thus, when working on the Siminn project we made no attempt to influence font size or family. In cases where we wanted a larger font, we simply relied on the generic XHTML heading elements.
  • he inclusion of font-size=smaller in the body tag worked as a kind of global reset for font sizes in every device we tested. With this little bit of code we were able to sufficiently reduce the default font size and thus more faithfully reproduce the design that we had been tasked with coding.
  • XHTML-MP - the mobile web subset of XHTML - is fully supported on most modern devices.
  • You can't read 2 books and several articles about mobile web development and cover everything. Much of the effort is trial and error. When starting out, emulators are a good way to get a rough idea of how the site will work. It gives you some feel for the navigation, architecture and flow of the site, but the look and feel varies from the emulator to the real device. The best thing you can do is get a few real phones to test on. I'm sure between yourself, co-workers and a few friends, you can manage to test your site on a good cross-section of the phones out there. Finally, there is some help. The W3C mobile web initiative does have a checklist to see how well your site is doing and so does dev.mobi - if you take heed of these two lists, your site should give a quality experience to most customers.
Vernon Fowler

Responsive Design is Too Responsive? - 0 views

www.visionaustralia.org/...sive-design-is-too-responsive-

design responsive design responsive webdesign accessibility css3 media queries mediaqueries

shared by Vernon Fowler on 07 Apr 13 - No Cached
  • When you use browser zoom in Webkit browsers (Chrome and Safari), all elements on the page increase in size and start overlapping content. This is because WebKit browsers zoom to make the content bigger but the width of the browser remains unaffected, which means it doesn’t trigger responsive style sheet elements or address layout issues.
  • This is an accessibility issue as users with vision deficiencies use browser zoom to navigate websites. If they use Google Chrome they will have a lot of issues accessing content.
Vernon Fowler

RGD Launches Best Practices Handbook at DesignThinkers 2010 | Access Ability - 0 views

www.rgd-accessibledesign.com/...andbook-at-designthinkers-2010

accessibility handbook best practices design graphic resources reading webdesign print

shared by Vernon Fowler on 23 Feb 14 - No Cached
  • Available in both printed and accessible pdf formats, the handbook is free to anyone interested in designing more accessible and inclusive communications. Covering print, web and environmental design, it offers ideas on how to do better design – what factors to consider, what questions to ask, and where to find more information.
Vernon Fowler

Customise radio buttons without compromising accessibility - 0 views

www.chenhuijing.com/...out-compromising-accessibility

accessibility webdesign input buttons inclusivedesign

shared by Vernon Fowler on 16 Sep 18 - No Cached
  • 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.
  • Vernon Fowler on 16 Sep 18
     
    "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."
Sandra Earl

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

www.digital-web.com/...ities_when_designing_a_website

accessibility design standards general development FUSION09

shared by Sandra Earl on 12 Oct 10 - Cached
  • 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.
Sandra Earl

Designing for Dyslexics: Part 3 of 3 - Accessites.org - 0 views

accessites.org/...ning-for-dyslexics-part-3-of-3

accessibility cognitive learning disabilities dyslexia

shared by Sandra Earl on 12 Oct 10 - Cached
  • Shorter line lengths and narrower text columns make reading easier.
  • Consider setting a percentage width for text areas and set the margins to “0 auto” via CSS. The page side margins will then increase proportionately on wider screens.
  • Most browsers have a default line-height of around 1em. This normally results in closely packed lines of text. Increasing the line-height to around 1.3em immediately makes longer lines of text easier to read. Likewise, ensure that paragraphs are visibly separated. Don’t be afraid of white space. Use it to enhance readability.
  • ...16 more annotations...
  • percentages or ems.
  • If possible, use a sans-serif font. The decorative “hooks” on the main strokes of serif letters may create additional problems for dyslexic users.
  • If you have to use a corporate serif font, consider reducing the letter-spacing slightly so that the letters within a word lie closer together but increasing the word-spacing to create a slightly larger distance between individual words.
  • uneven word spacing disrupts that pattern recognition.
  • Unjustified text, although less attractive at first glance. is far easier to read.
  • When italic fonts are used on a web page, the individual letters can have a slightly jagged line compared to a non-italic font. This “pixelation,” coupled with their “lean to the left” makes them hard for a dyslexic person to read. The effect is compounded if the text is also small.
  • Use italics sparingly and consider bold text for important words. They’ll be far easier to read.
  • Photographs, charts and icons can convey a great deal of information regarding the topic of a page. Graphics can break the page up into smaller chunks. They can also provide visual memory aids and support comprehension for dyslexics.
  • Dyslexics often have poor organisational skills. Lists can help them by organising information into small, logical chunks.
  • Dyslexics tend to have poor information processing skills. So it is relatively easy to overload them by literally providing too much information on one page.
  • Within a page, use headings to sub-divide the page logically and visually. Adding coloured heading backgrounds or borders will act as further support.
  • Consider breaking complex pages down into two or three smaller pages.
  • Keep site navigation simple and logical. Make sure that the Home page is easily reachable from any part of the site. Try not to “hide” this important link in a logo.
  • break long sentences down into two or more shorter sentences
  • Many designers do not realise that some screen reader users can see perfectly well. It is not uncommon for dyslexics to use screen readers to support their reading. This may create problems where text has been positioned off screen.
  • If you do make use of off screen positioning, try to do so sympathetically. Consider the viewpoint of those who can both hear the screen reader and see the page. Ask yourself if you’re potentially creating confusion.
Sandra Earl

Designing for Dyslexics: Part 2 of 3 - Accessites.org - 0 views

accessites.org/...ning-for-dyslexics-part-2-of-3

accessibility cognitive learning disabilities dyslexia

shared by Sandra Earl on 12 Oct 10 - Cached
  • “Ensure that foreground and background color combinations provide sufficient contrast when viewed by someone having color deficits or when viewed on a black and white screen.”
  • Scoptic Sensitivity Syndrome
  • can make high contrast text difficult to read because the words seem to constantly move on the page.
  • ...7 more annotations...
  • anecdotal evidence suggests that, as soon as you reduce the colour contrast, the reading difficulties suffered by dyslexics are alleviated, to some degree, across the board.
  • Contrasts that comply with the thresholds can, and do, create very real problems for dyslexics.
  • t has been my experience that just about every issue within accessible web design is about balance. Skew any one factor too much in favour of a particular user group and you risk disadvantaging another group with opposing needs.
  • What I am suggesting is that, if a colour theme is chosen that conforms to, or exceeds, the W3C colour difference threshold, an alternative, low contrast style sheet should be provided as standard.
  • I then suggested that “disability” be defined as an “inability to pursue an activity because of a medically determinable physical or mental impairment.”
  • suggest that adhering to the Hewlett-Packard colour difference threshold would represent a more balanced approach to the issue of colour contrast. To that end,
  • I’ve developed an alternative color contrast analyser for people to try.
Sandra Earl

Designing for Dyslexics: Part 1 of 3 - Accessites.org - 0 views

accessites.org/...ning-for-dyslexics-part-1-of-3

accessibility cognitive learning disabilities dyslexia FUSION09

shared by Sandra Earl on 12 Oct 10 - Cached
  • The specific needs of dyslexics tend to be overshadowed by the more widely understood needs of the visually impaired. Unfortunately, design decisions that benefit the latter group tend create problems for the former. This is never more evident than in so-called “accessible” text only pages with their emphasis on high contrast and complete lack of images and colour.
  • What is Dyslexia?
  • The word “dyslexia” can be broken down into two parts: “Dys” meaning poor and “lexia” meaning language. Thus dyslexics have difficulties with words. Current theories suggest that
  • ...10 more annotations...
  • it is not a visual problem but a word decoding, or recognition deficit.
  • Our ability to recognise words is thought to be based upon two slightly different “memory skills” — phonetic memory and lexical memory. Dyslexics may have a good phonetic memory — as evidenced by their tendency to spell many words phonetically — but a very poor lexical memory.
  • No two dyslexics demonstrate their disorder in the same manner. It can affect boys and girls equally, across all socioeconomic classes worldwide.
  • “A combination of abilities and difficulties that affect the learning process in one or more of reading, spelling and writing.
  • Accompanying weaknesses may be identified in areas of speed of processing, short-term memory, sequencing and organisation, auditory and/or visual perception, spoken language and motor skills. It is particularly related to mastering and using written language, which may include alphabetic, numeric and musical notation.”
  • the more complex the written language is, the greater the likely percentage of people who will have difficulty reading it.
  • As many as 1 in 10 people in the UK are dyslexic.
  • Worldwide, it is likely that the number of dyslexics is likely to be equal to, if not significantly larger than, the number of visually impaired people.
  • poor short-term memory and organisational skills will mean that site navigation and page organisation become more important.
  • high contrast text difficult or impossible to read. The phrases I’ve heard most often are “the text keeps moving” or “the words seem to dance on the page.”
Vernon Fowler

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

alistapart.com/...on-alt-text

alt text images accessibility usability design standards

shared by Vernon Fowler on 10 Feb 13 - No Cached
  • 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.
Vernon Fowler

Command F5 Web Accessibility Project - 0 views

commandf5.com/index.html

accessibility inclusive empathy web

shared by Vernon Fowler on 12 Jan 17 - No Cached
  • Vernon Fowler on 12 Jan 17
     
    "Encouraging Accessible & Inclusive Design and Development"
Vernon Fowler

WordPress › WP Accessibility Plugin « Make WordPress Accessible - 0 views

make.wordpress.org/...wp-accessibility-plugin

accessibility cms webdesign plugin WordPress checklist

shared by Vernon Fowler on 07 Jan 14 - No Cached
  • These title attributes have exactly the same value as the text of the link — if the text of the link is “Joe’s Blue Widgets”, then the title attribute is also “Joe’s Blue Widgets”. In the best case scenario, where a screen reader is set up to ignore title attributes, having this set makes little difference. In the worst case scenario, where a screen reader reads all attributes, it’s awful: the screen reader reads the title attribute and the link text, meaning that every link is, effectively, read twice.
  • Skiplinks provide a means to leap from the very top of a page to an alternate section of that page — one principle use being to leap over the main navigation to the main page content.
  • It does *not* remove it from other fields, because a common technique to grant keyboard focusability to normally non-focusable elements is to define a negative tabindex: this places the element into the focus sequence but does not force it into a particular place in that sequence.
  • ...5 more annotations...
  • Removing those attributes usually makes keyboard navigation much more linear and predictable. The intention behind tabindex was to create a logical tab sequence when it would otherwise have been unnatural; but in practice, that required absolutely insane degrees of maintenance to use in a real-life web site.
  • Links opened in new windows can break web site flow (creating a change of context) and disorient users who don’t realize they’ve moved to a new window. Also, it takes away the option of opening in the same window/tab
  • Remove title attribute from inserted post images/featured images
  • for accessibility, all links should make sense without requiring context, to grant screen readers the ability to scan the page and have information. This plug-in adds the title of the post into this pattern
  • Many designs do not provide a design for the view of links or other focusable fields when a keyboard user brings focus to that element. This makes it very difficult for visual users who are keyboard dependent to keep track of where they are. A common pattern for this is to change the appearance of the element on keyboard focus; and this item adds an outline.
Vernon Fowler

WAT-C Web Accessibility Tools Consortium - 0 views

wat-c.org/index.html

accessibility webdesign tools development

shared by Vernon Fowler on 23 Feb 14 - No Cached
  • Vernon Fowler on 23 Feb 14
     
    "The Web Accessibility Tools Consortium [WAT-C] provides a collection of free tools to assist both developers and designers in the development and testing of accessible web content. The consortium is a collaboration of some of the world's leading accessibility practitioners, founded by Accessible Information Solutions (Australia), Infoaxia (Japan), The Paciello Group (USA), Wrong HTML (Japan), and Juicy Studio (UK). Our goals are to develop new tools, improve current tools and expand the range of browsers, operating systems and languages in which our tools are available."
1 - 20 of 94 Next › Last »
Showing 20▼ items per page