SPA(Next.js)のスクリーンリーダーによる画面遷移で工夫したこと
こんにちは、Ubie株式会社でデザインエンジニアをやっているtakanoripです。 UbieではユビーAI受診相談というサービスを開発しており、症状に関する質問をするページ（以下「質問ページ」という）を中心にアクセシビリティ向上のための様々な改善を進めています。 今回はその中の1つの事例をご紹介します！ Ubieでのアクセシビリティ推進の全体像が気になる方は弊社デザイナー3284さんの記事を読んでもらえたら嬉しいです！ 今回の課題：SPAでの画面遷移 SPAの画面遷移はスクリーンリーダー対応が漏れがちなポイントとして広く知られています。 SPAでない静的なウェブサイトでページ遷移した場合、スクリーンリーダーは次ページのタイトルを読み上げ、カーソル位置はページの先頭の要素に移動します。 しかしスクリーンリーダーに対応できていないSPAでページ遷移した場合、スクリーンリーダーは次ページのタイ
React Redux を用いた SPA 新規サービスを運用して得た知見と実装例 | ランサーズ（Lancers）エンジニアブログ
@tsuyoshi です。先日行われた React Redux を用いた SPA 新規サービスを運用して得た知見と実装例 と言うイベントで使ったスライドをアップロードしました。 https://pook.life/ と言うサービスをReact Redux の SPA で運用して得た知見などを共有できればと思い。公開してみた次第です。 内容としては 利用しているライブラリや開発環境、開発フロー コードベースでの実装例の紹介 その他 SPA サービスを運用する上での構成や知見 など、実例や結果を交えながら説明しています。 何かの参考になれば幸いです。 スライドを貼ってますが、以下のgoogle スライドで見た方が、アニメーションとか動いて見やすいかもしれません。 https://docs.google.com/presentation/d/1TIEg5rYJ9vlWTSO6etwupBBO0e
SPAにおけるCSSについて、ひとつの解（追記あり） - エンジニアをリングする
SPAにおけるCSSのありかたについてずっと悩んでたけど昨日今日で一筋の光明が見えた— よしこ (@yoshiko_pg) 2017年4月7日 この話を簡単にまとめておこうと思います。 結論を先に書くと「今のところtemplate literal内にCSSを記述する形式のCSS in JSがいい感じ。Reactならstyled-componetnsが良かった」という感じです。 悩んでいたこと コンポーネント指向でSPAを作っていく上で、CSS（というかスタイリング）はどう書いていったらいいんだろう？ということに結構悩んでいました。 HTMLとJSがコンポーネントとしてまとまっていく中でCSSだけは今まで通り別物として扱い、BEMなどでグローバルスコープと戦うのか？はたまたCSSの枠をはみ出てJSコンポーネントの粒度に合わせたコンポーネント化をするのか？ 加えて、見た目も挙動も複雑なアプリケ
Reactはリアクティブプログラミングなのか? - uehaj's blog
Reactとは 設計をとりもどす Reactでやってみる Elm-HtmlとReactの対応 ReactはFRPか? ReactはFPか? FPとOOPの真の関係 まとめ 追記 Reactとは Reactは、Facebookが開発した、JSのUIフームワークもしくはライブラリです。Reactが提供する中核機能は以下です。 イミュータブルなUIビルダー Virtual DOMによる効率的更新 上記に付随するイベントハンドラ群を編成していくための方法論 React単体ではコールバックの組合せで、Fluxの一部として使用するとオブザーバーパターンで実現 効用は、再利用性と保守性・可読性向上です。特に、Reactで作成した画面部品のコンポーザビリティが高く、細粒度のUI部品利用の発展充実が期待されます。作りは通常のJSクラスライブラリであり、覚えたりすることは多くありません。 設計をとりもどす R
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
