seranela• 1,150
@seranela
Submitted
seranela
@seranela
All comments
- seranela• 1,150
@seranela
Posted
Had a feeling that there would be some warning (at least it's a warning and not an error) about the intro div being outside of a landmark. I wasn't sure how else to do it other than putting the graphic as a background image on the body element and then having to fiddle with the height of the header and intro content as the page is resized. I used calc() to adjust based on the image ratio but then I ran into issues where typography was going out of the landmarks. I would really like to know of a semantic, responsive approach to getting background hero images that span across multiple landmarks to work effectively without much "hackery."
0 - potato58• 30
@potato58
Submitted
This was my first time working with svg icons and I struggled with changing the icon colours. I ended up using filter in the css but I am not sure whether this is the best workaround?
Any feedback on how I can improve is appreciated. I am particularly keen to know how I could improve accessibility, and whether the way I handled the background images is the best way to do this.
seranela• 1,150@seranela
Posted
Since you already have the SVG icon code inside of your HTML, you can apply styles to them. CSS Tricks has a resource on how you can accomplish that. The example SVG icons I've used have a
fillattribute on the<path>element. So, I would have<path class="icon-path" fill="#FFFFFF">. Then, you could do.icon-path:hover { fill: red; }. The resource link has it in the<svg>element, which apparently works as well.As for accessibility, I use Firefox's Accessibility tab and Chrome's Lighthouse tab in their dev tools to do some initial checks on issues. After that, I upload an initial solution version and then check it with WebAIM. These aren't a perfect solution to solving accessibility, but it does relieve some of it. There's an Accessibility Developers Guide with further information.
0 - seranela• 1,150
@seranela
Submitted
Adjusted some colors for WCAG-AA contrast ratio. There are some colors that I did not adjust since they're built into the design images.
seranela• 1,150@seranela
Posted
Any idea why the solution preview shows the header cut off while the preview thumbnail (shown when listing individual solutions) shows the header correctly?
0 - seranela• 1,150
@seranela
Submitted
Adjusted colors for contrast. Provided functionality for mouse hover and click/tap. Took the data amounts and set bar max amount to highest value rounded up to the nearest tenth. Popup amounts are dynamic to data as well as dynamic to responsiveness. Added focus tab indexing for chart bars.
My main concern is accessibility when it comes to chart data. How can I setup accessible charts without errors/issues reported by accessibility checkers? I did try using the progress element along with label elements but was unsure how to create vertical progress bars without styling limitations/issues. Would really like to know an effective semantic approach for accessible chart data — or any chart type for that matter.
seranela• 1,150@seranela
Posted
Updated. Added
<span>textual elements inside of the bar<div>'s with screen reader only visibility. Also, used<abbr>elements to provide full word descriptions for bar labels, which I think is a nice semantic approach to describing the shorthand labels.0
