Accessibility in ePortfolios
What is Accessibility?
- Accessibility is how difficult or easy it is for users with disabilities to view and interact with your content. It takes into account blind users, who need to use page viewers, users with learning disabilities that might make it difficult to read certain font styles, and users who are restricted to using a keyboard to navigate pages.
Why is Accessibility Important?
- Accessibility is important because it allows more users and consumers to view your content. Accessibility can also compliment an ePortfolio by showing extra effort and creating a more professional appearance. For example, you're a nursing student who is currently tracking your hours and work history in an ePortfolio. In the future you would like to use this ePortfolio as a resume, and want to know the best way to organize it. By using accessible font and design choices you both broaden your appeal to a larger number of employers, as well as show thoughtfullness and professionalism, increasing your likelihood of catching an employers attention.
Good vs. Bad
What does a site with poor accessibility look like?
- A site with poor accessibility will often feature an overly busy layout, too many colours, and a difficult to navigate menu. When creating an ePortfolio it is important to remember that some users have visual, motor, or cognitive disabilities that can affect the way they can consume your content. Below is an example of a website that doesn't feature an accessible layout.
The above website is a good example of a poorly accessible website design. The layout is cluttered and impossible to navigate with a keyboard (i.e. using the TAB button), the colours are erratic and inconsistent, and there is no delineation between links, information, and graphics.
When creating your ePortfolio:
- DON'T use too many colours, try to keep yourself down to two main colours and one accent colour. Keep your colours consistent (use your accent colour for links or other unique media, use your main colour #1 for headers, your main colour #2 for body text, etc.).
- DO keep your navigational links clearly labeled and seperated from the content in the main body of the page. DO use subheaders for each different group of links, this enables visually impaired users' viewing software to better navigate your content.
- DON'T use too many pictures and other visual media, if you do use them then remember that they should be visually seperated from the rest of your content (either with negative space in the form of linebreaks or with an actual visual seperation such as a border).
- DO provide clear information about what your links lead to, and why they are important to your ePortfolio. If adding a hyperlink, be sure to add a succinct summary of what it is and where it goes to in the "Title" section of the link creation sub-menu.
What does a site with good accessibility look like?
- A site with good accessibility will be easy to navigate using a keyboard, will make good font choices, and will keep in mind users with visual impairments when integrating media and other graphical components. An excellent example of this is the BBC website.
BBC's homepage is a good example of an accessible website due to its use of sans-serif fonts (examples include; Verdana, Arial, Marvel, & Open Sans), nicely organized media, and easy to navigate layout. The BBC website also incorporates video players that more often then not integrate accessible features such as full video-transcripts and full audio descriptions of videos in their iPlayer.
When creating your ePortfolio:
- DO use visuals to delineate different sections of your ePortfolio. The BBC page does a good job of using subtle variations in their backgrounds to show different sections (moving between a grey-beige for featured content and a simple white for the main body of content).
- DO clearly label links and graphics, especially when they are hyperlinked.
- DO keep your design simple, as seen above the use of brighter colours is reserved for the headings of subsections throughout the main page, attracting a user's attention but not overwhelming the page's layout.
- Below I have included a graphic displaying several of the prominent things you should check your ePortfolio for to make sure it's accessible. When looking over your ePortfolio to check accessibility make sure to keep in mind that many users with disabilities (especially visual and auditory) use third-party programs in order to interpret websites, and sometimes only see a small portion of the screen at a time. This means that any layout desicions you make must be consistent across the entirety of your ePortfolio, or else the user may get confused attempting to navigate the pages out of context.
If you have trouble viewing the graphic above, I have also included a link to download the image itself. If you cannot access images I have included a transcript below of the steps included in the graphic.
- Colors used have enough contrast to be visible on a black and white display, or to users with visual impairments
- Sparingly used busy colors and graphics
- Created a consistent ePortfolio layout and navigation menu
- Clearly labeled graphics and media
- Clearly organized and seperated textual components
- Listed expansions of any acronyms and abbreviations
- Summarized visual media
- Used clear and concise language throughout
- Any informationed conveyed through color is also available through context or markup