Sean O'Connor
282ed0b0ad
- Added BreadcrumbWrapper to the layout for better navigation. - Updated ProjectsPage to include CardFooter with conditional rendering for project links. - Improved image alt text for better accessibility in travel and project sections. - Added new project details and alt text in data.ts for enhanced content clarity.
15 KiB
Building an Accessible Website
As always, these projects are in constant renovation. Ask questions early and often!
Overview
We will be combining many aspects of what we've learned this semester into a website.
Project Options
| Create a new website | Update an existing website you manage |
|---|---|
| You may choose to use any platform, framework, or tool you'd like. Bucknell primarily uses Wordpress and therefore provides the best support for it. | If you choose this option, confirm with me your website has sufficient complexity you will need to create a separate document with some additional content, as noted |
Extensions:
Short extensions (up to two days) will be granted without penalty. Extensions beyond that must be discussed as they could result in taking an incomplete course.
Minimum Technical Components of website
Your website must have at least the following components.
Updating: if you are updating a website and it does not have this range of content, and you cannot add it, please check with me before proceeding
- 2 pages
- 1 decorative image
- 1 non-decorative image
- 1 video
- [ ] includes captions and audio descriptions - 4 headings with at least 2 layers of heading structures
- 1 link
- 1 other feature, for example
- [ ] navigation menu
- [ ] button
- [ ] audio
Website Content
You may create a website about anything you'd like. If you're not sure what to make it about, I recommend making yourself a portfolio website that future employers could look at.
Accessibility Content
- If you are creating a new website, you must have the following content on the site.
- If you are working on an existing site where it would not be appropriate to add this content, you may submit it as an accessible PDF, a Google Doc with editable permissions, or as a stand-alone webpage.
Content
- make a case for why it is important this website is accessible, with information relevant to the content of the site
- give explicit examples of at least 4 accessibility practices you used in your design. Provide sufficient details
- If any part of your website is inaccessible due to platform limitations, provide an explanation of why and what work-around you provided. If something is inaccessible in your website and you do not declare it, you will lose points.
Example Accessibility Practice Explanation
| Insufficient Detail | Sufficient Detail |
|---|---|
| I choose the text color and background color to have high enough contrast. | I ensured my text color and background had sufficient color contrast. I used LearnUI's contrast palette generator to identify a blue text color that worked with my light pink background for all text sizes. |
Example Inaccessible Explanation 1
Wix embedded videos do not support captioning. I therefore embedded captions into the video (i.e., used open captioning). This is not optimal, as people who find captions distracting cannot turn it off, but provides access to people who cannot hear the audio.
Places to find content
Do not just steal content offline.
Use proper credit for any content you use.
Images
- You may use your images
- Use CC-licensed/open access photos
- https://www.nga.gov/open-access-images.html
- https://www.pexels.com/
- https://unsplash.com/
- https://flickr.com/search/?text=search (you can search for CC-licensed photos with the “any license” dropdown)
- Use CC-licensed/open access photos
Videos
If you embed a video from YouTube, properly credit and link back to their content.