Skip to content
OverviewSolutions
59
Comments
5
seranela
@seranela

All comments

  • seranela•1,150
    @seranelaPosted almost 2 years ago

    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
    @potato58Submitted almost 2 years ago

    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.

    Huddle landing page with single introductory section

    2
    seranela•1,150
    @seranelaPosted almost 2 years ago

    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 fill attribute 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
    @seranelaSubmitted almost 2 years ago

    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.

    Sunnyside agency landing page

    1
    seranela•1,150
    @seranelaPosted almost 2 years ago

    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
    @seranelaSubmitted almost 2 years ago

    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.

    Expenses chart component

    1
    seranela•1,150
    @seranelaPosted almost 2 years ago

    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
  • seranela•1,150
    @seranelaPosted about 2 years ago

    The orange and white had a issue with WCAG contrast ratio. I made the orange darker to resolve it.

    0