archive-edu.com » EDU » W » WASHINGTON.EDU

Total: 911

Choose link from "Titles, links and description words view":

Or switch to "Titles and links view".
  • HTML headings | Accessible Technology
    relate to one another They provide a target so users can jump from heading to heading with a single keystroke e g the letter H in some screen readers With the first purpose in mind headings should be used in proper order whenever possible That is you shouldn t have H2 headings with no parent H1 heading and all headings should be in order with no heading levels skipped Website owners at the University of Washington are encouraged to use the UW WordPress Theme the theme used for the UW Accessible Technology site In this theme the page title is marked up as an H1 heading Therefore the first level of subheadings within the page content should be marked up as H2 headings Additional information is available on the AccessComputing 30 Tips for Web Accessibility site Tip 2 Use Headings Properly Comments are closed Accessible Technology Our goal An inclusive university Getting Started Creating Documents Creating Videos Developing Websites Managing for accessibility Procuring IT Getting Help Events Collaboration Disability Resources Laws Policies UW accessibility highlights Developing accessible websites Accessible forms Accessible images Accessible menus Accessible tables Accessible with keyboard ARIA for Web applications ARIA landmark roles Effective use of color HTML headings Meaningful link text Tools resources Explore the UW Admissions Undergraduates Graduates UW Online Paying for college Husky Promise Financial aid estimator Continuing Education Summer quarter Academics Academic calendar Colleges Schools Departments Undergraduate learning Graduate School Course catalog Undergraduate majors Evening degree program English language programs Study abroad Graduation requirements Libraries Campus Life Husky Card Dining Student housing Student groups The HUB Husky sports IMA Diversity Hall Health Counseling Center University Book Store Computing support UW Police Holidays Leadership Board of Regents President s office Provost s office Vice presidents Vice provosts Deans and chancellors Futures Committee Government Relations

    Original URL path: http://www.washington.edu/accessibility/web/headings/ (2014-06-24)
    Open archived version from archive


  • Accessible with keyboard | Accessible Technology
    accessible websites Accessible with keyboard Accessible with keyboard Many users are physically unable to use a mouse and might be navigating through the page using keyboard alone Fortunately testing a website with keyboard is a simple accessibility test that requires no special tools or skills Just try navigating your website using the keyboard only don t touch the mouse Use the tab key to navigate between features and other keys if doing so would seem to make sense e g Enter or space to click the element that currently has focus arrow keys to move within a widget such as a menu or slider escape to close a pop up window As you do this consider these questions Can you access all features Can you operate all controls Is it reasonably easy to tell where you are on the page Visible Focus for Keyboard Users If it is difficult or impossible to tell where you are on the page when navigating with keyboard this can typically be fixed with some very simple CSS The following examples show how to change the visible style when a link has focus In this case the foreground and background colors are swapped both for mouse users and keyboard users A link with black text on a white background a color black background color white text decoration underline Swap the colors and remove the underline when a mouse user hovers over the link a hover color white background color black text decoration none Add the same effect for keyboard users triggered when the link has focus a hover a focus color white background color black text decoration none Add the same effect for people using Internet Explorer prior to version 9 which didn t support focus a hover a focus a active color white background color black text decoration none Comments are closed Accessible Technology Our goal An inclusive university Getting Started Creating Documents Creating Videos Developing Websites Managing for accessibility Procuring IT Getting Help Events Collaboration Disability Resources Laws Policies UW accessibility highlights Developing accessible websites Accessible forms Accessible images Accessible menus Accessible tables Accessible with keyboard ARIA for Web applications ARIA landmark roles Effective use of color HTML headings Meaningful link text Tools resources Explore the UW Admissions Undergraduates Graduates UW Online Paying for college Husky Promise Financial aid estimator Continuing Education Summer quarter Academics Academic calendar Colleges Schools Departments Undergraduate learning Graduate School Course catalog Undergraduate majors Evening degree program English language programs Study abroad Graduation requirements Libraries Campus Life Husky Card Dining Student housing Student groups The HUB Husky sports IMA Diversity Hall Health Counseling Center University Book Store Computing support UW Police Holidays Leadership Board of Regents President s office Provost s office Vice presidents Vice provosts Deans and chancellors Futures Committee Government Relations Faculty Senate ASUW GPSS RHSA Portals Business Industry Diversity Educational Excellence Global Affairs Research UW Foundation Visit the UW Planning a visit Things to do Tours Connect with us Facebook YouTube Instagram Twitter m UW LinkedIn

    Original URL path: http://www.washington.edu/accessibility/web/keyboard/ (2014-06-24)
    Open archived version from archive

  • Accessible images | Accessible Technology
    web page Simple Informative Images If images are designed to communicate information to the user they must be described If they are complex images with a lot of important detail e g graph chart diagram see the next section on Complex Informative Images In contrast if images are simple e g logos buttons photographs a short description should be added to the alt attribute of the img element The description should describe the content of the image as succinctly as possible The goal is to provide access to the content of the image without burdening the user with superfluous details Additional information is available on the AccessComputing 30 Tips for Web Accessibility site Tip 1 Add proper alt text to images Complex Informative Images If images contain a lot of important detail e g graph chart diagram these should include a short title or summary in the alt attribute but a long description that includes more detail should also be provided A long description can include any HTML necessary to communicate the content of the image including data tables Historically the long description has been provided on a separate web page In HTML5 it is now valid to include a long description on the current page The longdesc attribute is added to the img element has a URL as its value pointing to the location of the description The URL can point to a separate page or to the id of a container on the current page If added to the current page it is ok to hide the description using CSS display none Screen readers and supporting browsers will inform the user that a long description is available and the user can choose whether they want to read that description Decorative Images If images are used solely for decorative purposes they should be added to the page using CSS not with the HTML img element If for some reason an image needs to be added using HTML the img element must have an empty alt attribute alt This is a standard technique for communicating to screen readers that the image should be ignored Comments are closed Accessible Technology Our goal An inclusive university Getting Started Creating Documents Creating Videos Developing Websites Managing for accessibility Procuring IT Getting Help Events Collaboration Disability Resources Laws Policies UW accessibility highlights Developing accessible websites Accessible forms Accessible images Accessible menus Accessible tables Accessible with keyboard ARIA for Web applications ARIA landmark roles Effective use of color HTML headings Meaningful link text Tools resources Explore the UW Admissions Undergraduates Graduates UW Online Paying for college Husky Promise Financial aid estimator Continuing Education Summer quarter Academics Academic calendar Colleges Schools Departments Undergraduate learning Graduate School Course catalog Undergraduate majors Evening degree program English language programs Study abroad Graduation requirements Libraries Campus Life Husky Card Dining Student housing Student groups The HUB Husky sports IMA Diversity Hall Health Counseling Center University Book Store Computing support UW Police Holidays Leadership Board of Regents President s office Provost

    Original URL path: http://www.washington.edu/accessibility/web/images/ (2014-06-24)
    Open archived version from archive

  • Accessible menus | Accessible Technology
    accessible websites Accessible menus Accessible menus Website navigation menus often include dropdown or flyout menus where submenus are hidden by default and appear visibly when mouse users hover over or click a top level menu item These sorts of menus can major present accessibility challenges for many groups of users unless they are coded properly UW IT Technology Accessibility Specialist Terrill Thompson has explored this problem in depth and provides recommendations in his blog post Accessible Dropdown Menus Revisited The UW WordPress Theme includes a navigation menu that was specifically designed for accessibility Website owners at the University of Washington are encouraged to use this theme Comments are closed Accessible Technology Our goal An inclusive university Getting Started Creating Documents Creating Videos Developing Websites Managing for accessibility Procuring IT Getting Help Events Collaboration Disability Resources Laws Policies UW accessibility highlights Developing accessible websites Accessible forms Accessible images Accessible menus Accessible tables Accessible with keyboard ARIA for Web applications ARIA landmark roles Effective use of color HTML headings Meaningful link text Tools resources Explore the UW Admissions Undergraduates Graduates UW Online Paying for college Husky Promise Financial aid estimator Continuing Education Summer quarter Academics Academic calendar Colleges Schools Departments Undergraduate learning Graduate School Course catalog Undergraduate majors Evening degree program English language programs Study abroad Graduation requirements Libraries Campus Life Husky Card Dining Student housing Student groups The HUB Husky sports IMA Diversity Hall Health Counseling Center University Book Store Computing support UW Police Holidays Leadership Board of Regents President s office Provost s office Vice presidents Vice provosts Deans and chancellors Futures Committee Government Relations Faculty Senate ASUW GPSS RHSA Portals Business Industry Diversity Educational Excellence Global Affairs Research UW Foundation Visit the UW Planning a visit Things to do Tours Connect with us Facebook YouTube Instagram Twitter m UW

    Original URL path: http://www.washington.edu/accessibility/web/menus/ (2014-06-24)
    Open archived version from archive

  • Accessible forms | Accessible Technology
    field Since screen reader users don t have access to these same visual queues labels and prompts must be explicitly associated with form fields within the HTML Following are a few techniques for accomplishing this Use the label element Consider the following field and the prompt that proceeds it div Last name input type text name last name id last name div The prompt Last name precedes the input field but its relationship to the field is not explicitly defined Therefore some screen readers will simply announce this as an edit field but will not prompt the user to enter Last name into that field Other screen readers will guess at the label and in this example will probably guess accurately However as forms grow in complexity screen readers that guess at labels are more likely to guess incorrectly which means users are more likely to complete the form incorrectly The following code has been corrected Last name is now defined as a label and is explicitly associated with the form field because the label s for attribute and the input s id attribute share the same value div label for last name Last name label input type text name last name id last name div Use fieldset and legend elements For groups of related fields such as radio buttons and checkboxes each form field must have a label as described in the previous section However that prompt alone can be meaningless if the user doesn t know the question The technique for addressing this problem is to group these elements together using a fieldset element then use a legend element to markup the question as in the following example fieldset legend What is your favorite color legend div input type radio name color value Red id color red label for color red Red label div div input type radio name color value Green id color green label for color green Green label div div input type radio name color value Blue id color blue label for color blue Blue label div fieldset Additional examples of form controls are available on WebAIM s article Creating Accessible Forms WebAIM has also written an excellent article on Usable and Accessible Form Validation and Error Recovery Comments are closed Accessible Technology Our goal An inclusive university Getting Started Creating Documents Creating Videos Developing Websites Managing for accessibility Procuring IT Getting Help Events Collaboration Disability Resources Laws Policies UW accessibility highlights Developing accessible websites Accessible forms Accessible images Accessible menus Accessible tables Accessible with keyboard ARIA for Web applications ARIA landmark roles Effective use of color HTML headings Meaningful link text Tools resources Explore the UW Admissions Undergraduates Graduates UW Online Paying for college Husky Promise Financial aid estimator Continuing Education Summer quarter Academics Academic calendar Colleges Schools Departments Undergraduate learning Graduate School Course catalog Undergraduate majors Evening degree program English language programs Study abroad Graduation requirements Libraries Campus Life Husky Card Dining Student housing Student groups The HUB Husky sports IMA Diversity Hall

    Original URL path: http://www.washington.edu/accessibility/web/forms/ (2014-06-24)
    Open archived version from archive

  • Accessible tables | Accessible Technology
    was a frequently abused technique in the past but multi column layouts can now be attained using CSS to handle layout and positioning That said data tables are still useful for presenting data in rows and columns A few specific HTML tags are required in order to ensure that data tables that are accessible to screen reader users WIthout these tags users who are unable to see the table can find it very difficult or impossible to understand the relationships between table headers and the cells within their scope The specific tags required depends on whether the table is simple or complex Simple Table A simple table has a single header at the top of each column and optionally a single header in the first column of each row It has no nested columns or rows To make a simple table accessible apply the following techniques Markup all column headers or row headers as table headers using the th element Define the scope of each th using the scope attribute the value of scope can be either col or row Complex Table A complex table is any table that is not a simple table as defined in the preceding section There might be nested rows or columns or headers might be located in places other than the first row or column These sorts of tables can be very challenging for screen reader users to understand To ensure their accessibility apply the following techniques Markup all column headers or row headers as table headers using the th element Add a unique id attribute to each th element For every table data cell td add a headers attribute that lists the id s of all headers that apply to that particular cell If more than one header applies to a cell separate id s with a space Additional Sources of Information AccessComputing 30 Tips for Web Accessibility site Tip 8 Markup Tables Appropriately WebAIM Creating Accessible Tables Comments are closed Accessible Technology Our goal An inclusive university Getting Started Creating Documents Creating Videos Developing Websites Managing for accessibility Procuring IT Getting Help Events Collaboration Disability Resources Laws Policies UW accessibility highlights Developing accessible websites Accessible forms Accessible images Accessible menus Accessible tables Accessible with keyboard ARIA for Web applications ARIA landmark roles Effective use of color HTML headings Meaningful link text Tools resources Explore the UW Admissions Undergraduates Graduates UW Online Paying for college Husky Promise Financial aid estimator Continuing Education Summer quarter Academics Academic calendar Colleges Schools Departments Undergraduate learning Graduate School Course catalog Undergraduate majors Evening degree program English language programs Study abroad Graduation requirements Libraries Campus Life Husky Card Dining Student housing Student groups The HUB Husky sports IMA Diversity Hall Health Counseling Center University Book Store Computing support UW Police Holidays Leadership Board of Regents President s office Provost s office Vice presidents Vice provosts Deans and chancellors Futures Committee Government Relations Faculty Senate ASUW GPSS RHSA Portals Business Industry Diversity Educational Excellence Global Affairs Research UW Foundation

    Original URL path: http://www.washington.edu/accessibility/web/tables/ (2014-06-24)
    Open archived version from archive

  • Effective use of color | Accessible Technology
    communicate information For example if link text is blue it should also be underlined so users who are unable to perceive color differences can distinguish links from surrounding text Choose colors with ample contrast Some users have difficulty perceiving text if there is too little contrast between foreground and background The W3C Web Content Accessibility Guidelines 2 0 require that color combinations meet clearly defined contrast ratios In order to meet the guidelines at Level AA text or images of text must have a contrast ratio of at least 4 5 1 or 3 1 for large text In order to meet the guidelines at the stricter Level AAA the contrast ratio must be at least 7 1 or 4 5 1 for large text Several free tools have been developed that make it easy to check color combinations for WCAG 2 0 compliance Following are a few examples Colour Contrast Analyser for Windows or Mac WebAIM Color Contrast Checker Comments are closed Accessible Technology Our goal An inclusive university Getting Started Creating Documents Creating Videos Developing Websites Managing for accessibility Procuring IT Getting Help Events Collaboration Disability Resources Laws Policies UW accessibility highlights Developing accessible websites Accessible forms Accessible images Accessible menus Accessible tables Accessible with keyboard ARIA for Web applications ARIA landmark roles Effective use of color HTML headings Meaningful link text Tools resources Explore the UW Admissions Undergraduates Graduates UW Online Paying for college Husky Promise Financial aid estimator Continuing Education Summer quarter Academics Academic calendar Colleges Schools Departments Undergraduate learning Graduate School Course catalog Undergraduate majors Evening degree program English language programs Study abroad Graduation requirements Libraries Campus Life Husky Card Dining Student housing Student groups The HUB Husky sports IMA Diversity Hall Health Counseling Center University Book Store Computing support UW Police Holidays Leadership Board

    Original URL path: http://www.washington.edu/accessibility/web/color/ (2014-06-24)
    Open archived version from archive

  • Meaningful link text | Accessible Technology
    websites using a variety of techniques One of those is to pull up a list of links a feature of most screen readers and navigate through that list Given this link text should be able to stand alone independently of its context For example links like click here and more are meaningless out of context Also speech recognition users can click links with a voice command like click followed by the link text Therefore it s helpful to keep link text short and easy to say For both of these reasons long URLs should be avoided as link text short URLs like washington edu are ok since they re easy to say and stand alone independently of context Comments are closed Accessible Technology Our goal An inclusive university Getting Started Creating Documents Creating Videos Developing Websites Managing for accessibility Procuring IT Getting Help Events Collaboration Disability Resources Laws Policies UW accessibility highlights Developing accessible websites Accessible forms Accessible images Accessible menus Accessible tables Accessible with keyboard ARIA for Web applications ARIA landmark roles Effective use of color HTML headings Meaningful link text Tools resources Explore the UW Admissions Undergraduates Graduates UW Online Paying for college Husky Promise Financial aid estimator Continuing Education Summer quarter Academics Academic calendar Colleges Schools Departments Undergraduate learning Graduate School Course catalog Undergraduate majors Evening degree program English language programs Study abroad Graduation requirements Libraries Campus Life Husky Card Dining Student housing Student groups The HUB Husky sports IMA Diversity Hall Health Counseling Center University Book Store Computing support UW Police Holidays Leadership Board of Regents President s office Provost s office Vice presidents Vice provosts Deans and chancellors Futures Committee Government Relations Faculty Senate ASUW GPSS RHSA Portals Business Industry Diversity Educational Excellence Global Affairs Research UW Foundation Visit the UW Planning a visit Things

    Original URL path: http://www.washington.edu/accessibility/web/links/ (2014-06-24)
    Open archived version from archive