sites icon indicating copy to clipboard operation
sites copied to clipboard

Visual Accessibility option for Svelte API docs

Open subz390 opened this issue 5 years ago • 5 comments

Is your feature request related to a problem? Please describe. Yes, it's related to Web Content Accessibility, the visual theme of your website documentation.

Describe the solution you'd like Do you plan or would consider including Visual Accessibility options in the future? I have ideas for an Accessibility component for Svelte in addition to general discussions about themes sveltejs/svelte#1550

Describe alternatives you've considered I've started work on a dark mode theme that I am happy to share with you. 190912-0732 accessibility

How important is this feature to you? I cannot reasonably accesses your website for a prolonged period of time without visual adaptation, this means I have limited access to the resources contained therein, an adjustment to the theme restores access.

Additional context It's recognised in today's day and age that content and service providers take reasonable steps to provide equal access. But it's more than that, the Svelte website is the Ambassador of Svelte and a well thought out visual accessibility solution is just another super way to say good things about the ecosystem. Here is the Web Content Accessibility Guidelines (WCAG) 2.1.

subz390 avatar Sep 12 '19 07:09 subz390

Hey @subz390 - can you share this theme with us?

antony avatar Jul 04 '20 23:07 antony

Hi @antony I've posted what I've worked on so far at https://github.com/subz390/svelte-darkmode-css

  • Search fix issue in the css I posted for the two issues that I've fixed. For example in the images below illustrating the anchor is in the wrong place in the h3 > a and h4 > a elements. 200706-085601 wrong place 200706-085501 correct place

  • I developed the style in a userscript environment as it's easy to inject and edit the css with inheritence. I've included the userscript in the repo which also adds a dark light toggle at the top of the page.

  • May I ask how you've deployed Prism, for tokenizing the code blocks? I've been using Google Prettify but it's no longer maintained and I was never really happy with it's performance. However working on the darktheme, going through the Prism Okaidia sheet, the tokenization seems pretty good. So I was thinking about giving it a try.

subz390 avatar Jul 06 '20 08:07 subz390

Related to sveltejs/sites#97

dummdidumm avatar Jul 11 '21 08:07 dummdidumm

the color(the background, font color) is too green in your demo, which make ppl very uncomfortable. we should learn vscode dark or youtube dark, or windows dark, all of them has good color on all different monitors.

NewUserHa avatar Jan 09 '22 15:01 NewUserHa

the color(the background, font color) is too green in your demo, which make ppl very uncomfortable. we should learn vscode dark or youtube dark, or windows dark, all of them has good color on all different monitors.

Great suggestion. You may freely fork my repo, edit the colors that make you feel uncomfortable, then use the CSS in Stylish or as a userscript, so many choices, and don't forget to link your project back here so other people can benefit from your input.

subz390 avatar Jan 11 '22 01:01 subz390